<template>
  <div class="root">
    <!-- 申请状态：0->待处理；1->退货中；2->已完成；3->已拒绝; 4->仅退款 -->
    <el-tabs :value="formInline.status" @input="handleTabChange">
      <el-tab-pane label="所有售后订单" name="all"></el-tab-pane>
      <el-tab-pane label="售后处理中" name="0"></el-tab-pane>
      <el-tab-pane label="商品退货中" name="1"></el-tab-pane>
      <el-tab-pane label="售后已完成" name="2"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
      <el-tab-pane label="售后仅退款" name="4"></el-tab-pane>
    </el-tabs>
    <!-- <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        label-position="left"
        label-width="auto"
      >
        <el-form-item label="平台订单编号">
          <el-input
            v-model="formInline.orderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品货号">
          <el-input
            v-model="formInline.productCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input
            v-model="formInline.receiverName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input
            v-model="formInline.receiverPhone"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号">
          <el-input
            v-model="formInline.trackingNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="formInline.orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺 ">
          <el-select v-model="formInline.storeOrder" :clearable="true">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺订单编号">
          <el-input
            v-model="formInline.storeOrderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件省份">
          <el-select v-model="formInline.addresseeProvince" :clearable="true">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item, index) in options"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <div class="btnBoxs">
          <el-button
            icon="el-icon-refresh-right"
            @click="chongzhi"
            size="medium"
            >重置</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getOrderList"
            size="medium"
            >查询</el-button
          >
          <el-button
            style="margin-left: auto"
            type="success"
            @click="handleExport"
            size="medium"
            >导出订单</el-button
          >
          <el-button
            :disabled="!checkedOrderIds.length"
            type="warning"
            @click="handleAgree('all')"
            size="medium"
            >批量同意</el-button
          >
          <el-button
            :disabled="!checkedOrderIds.length"
            type="danger"
            @click="handleRefuse('all')"
            size="medium"
            >批量拒绝</el-button
          >
        </div>
      </el-form>
    </el-card> -->
    <el-card shadow="never">
      <el-table :data="list" @selection-change="handleSelectionChange">
        <!-- <el-table-column
          type="selection"
          width="50"
          align="center"
          fixed="left"
        ></el-table-column> -->
        <el-table-column
          prop="orderSn"
          label="订单编号"
          min-width="180"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="payPrice"
          label="支付金额"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope"> {{ scope.row.payPrice }}元 </template>
        </el-table-column> -->
        <el-table-column
          prop="createTime"
          label="申请时间"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.status == 0
                ? "待处理"
                : scope.row.status == 1
                ? "退货中"
                : scope.row.status == 2
                ? "已完成"
                : scope.row.status == 3
                ? "已拒绝"
                : "已关闭"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="serviceType"
          label="服务类型"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="reason"
          label="退款原因"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="returnAmount"
          label="退款金额"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="退款说明"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="proofPics"
          label="上传图片"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.proofPics !== ''">
              <el-image
                :src="scope.row.proofPics.split(',')[0]"
                style="width: 100px; height: 100px; margin-right: 10px"
                :preview-src-list="scope.row.proofPics.split(',')"
              ></el-image>
            </template>
            <template v-else></template>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="receiverPhone"
          label="收件人手机号"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="trackingNumber"
          label="快递单号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="expressPrice"
          label="快递费用"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="storeOrder"
          label="服务费用"
          min-width="100"
          align="center"
        ></el-table-column> -->
        <el-table-column
          label="操作"
          min-width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center">
              <el-button
                type="primary"
                size="small"
                @click="showOrderDetail(scope.row)"
                >查看商品</el-button
              >
              <template v-if="scope.row.status == 0">
                <el-button
                  type="warning"
                  size="small"
                  @click="handleAgree('single', scope.row)"
                  >同意</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="handleRefuse('single', scope.row)"
                  >拒绝</el-button
                >
              </template>
              <template v-else-if="scope.row.status == 1">
                <el-button
                  size="small"
                  type="danger"
                  @click="handleClose(scope.row)"
                  >确认收货</el-button
                >
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagingBox">
        <PaginationView :total="total" @change="fenye"></PaginationView>
      </div>
    </el-card>
    <el-drawer :visible.sync="dialogVisible" :with-header="false">
      <el-descriptions title="商品信息" :column="1" style="padding: 20px">
        <el-descriptions-item label="封面图">
          <el-image
            style="width: 100px; height: 100px"
            :src="goodsInfo.productPic"
            :preview-src-list="[goodsInfo.productPic]"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="销售价格">{{
          goodsInfo.productPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          goodsInfo.productName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品货号">{{
          goodsInfo.productCode
        }}</el-descriptions-item>
        <el-descriptions-item label="商品品牌">{{
          goodsInfo.productBrand
        }}</el-descriptions-item>
        <el-descriptions-item label="购买数量">{{
          goodsInfo.productCount
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{
          goodsInfo.storeName
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions v-if="!!goodsInfo.logisticsNumber" title="退货物流信息" :column="1" style="padding: 20px">
        <el-descriptions-item label="物流单号">{{
          goodsInfo.logisticsNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="物流公司">{{
          goodsInfo.logisticsCompany
        }}</el-descriptions-item>
        <el-descriptions-item label="上传图片">
          <template
            v-if="
              goodsInfo.logisticsPics !== '' && goodsInfo.logisticsPics !== null
            "
          >
            <el-image
              style="width: 100px; height: 100px"
              v-for="item in goodsInfo.logisticsPics?.split(',')"
              :key="item"
              :src="item"
              :preview-src-list="goodsInfo.logisticsPics?.split(',')"
            >
            </el-image>
          </template>
          <template v-else>未上传图片</template>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
import {
  fetchAfterSaleOrderList,
  selectStoreNAmByParams,
  postExportOrder,
  postAgreeOrderReturn,
  postRefuseOrderReturn,
  postReceiveGoods,
  postRefundMoney,
  postAgreeReplenishment,
  postAgreeExchange,
} from "@/api/OrderManagement";
import { selectAllAddress } from "@/api/shopDetail";
import dayjs from "dayjs";

export default {
  data() {
    return {
      total: 0,
      textarea2: "",
      radio: "1",
      dialogVisible: false,
      activeName: "a",
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        status: "all",
        // orderTime: [],
        // receiverPhone: "",
        // productCode: "",
        // receiverName: "",
        // orderNumber: "",
        // storeName: "",
        // trackingNumber: "",
        // addresseeProvince: "",
        // storeOrderNumber: "",
      },
      form: {},
      checkAll: false,
      isIndeterminate: false,
      checkedCities: [],
      list: [],
      options: [],
      storeList: [],
      checkedOrderIds: [],
      goodsInfo: {},
    };
  },
  created() {
    this.selectAllAddress();
    this.selectStoreNAmByParams();
    this.getOrderList();
  },
  activated() {
    this.getOrderList();
    // this.selectAllAddress();
  },
  methods: {
    dayjs,
    handleClose(i) {
      console.log(i);
      this.$confirm(`确认收货吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postReceiveGoods(i.id).then((data) => {
            if (data.code !== 200) {
              return;
            }
            if (i.serviceType === "退货" || i.serviceType === "拒收退货") {
              postRefundMoney(i.goodsId, i.id);
            }
            this.$message({
              type: "success",
              message: "操作成功",
              duration: 1000,
            });
            this.getOrderList();
          });
        })
        .catch((e) => e);
    },
    showOrderDetail(i) {
      this.goodsInfo = i;
      this.dialogVisible = true;
    },
    handleSelectionChange(e) {
      this.checkedOrderIds = e.map((i) => i.id);
    },
    handleTabChange(e) {
      if (e != this.formInline.status) {
        this.formInline.status = e;
        this.getOrderList();
      }
    },
    handleAgree(type, i) {
      this.$confirm(
        `是否同意${i.serviceType}${type === "all" ? "所选" : "该"}订单？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (["补发", "换货"].includes(i.serviceType)) {
            if (i.serviceType === "补发") {
              postAgreeReplenishment(i.id).then((data) => {
                if (data.code != 200) return;
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.getOrderList();
              });
            }
            if (i.serviceType === "换货") {
              postAgreeExchange(i.id).then((data) => {
                if (data.code != 200) return;
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.getOrderList();
              });
            }
          } else {
            postAgreeOrderReturn(
              type === "all" ? this.checkedOrderIds.join(",") : i.id + ""
            ).then((data) => {
              if (data.code != 200) return;
              if (i.serviceType !== "退货" && i.serviceType !== "拒收退货") {
                postRefundMoney(i.goodsId, i.id);
              }
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getOrderList();
            });
          }
        })
        .catch((e) => e);
    },
    handleRefuse(type, i) {
      this.$prompt("请输入拒绝原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          if (!value) {
            return "请输入拒绝原因";
          }
        },
        inputErrorMessage: '请输入拒绝原因'
      }).then(({ value }) => {
        postRefuseOrderReturn(
            type === "all" ? this.checkedOrderIds.join(",") : i.id + "",
            value
          ).then((data) => {
            if (data.code!= 200) return;
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getOrderList();
          });
      }).catch((e) => e);
    },
    // 分页
    fenye(val) {
      this.formInline.pageNumber = val.currentPage;
      this.getOrderList();
    },
    // 获取所有店铺
    selectStoreNAmByParams() {
      selectStoreNAmByParams().then((data) => {
        this.storeList = data.data;
      });
    },
    // 获取省市区地址
    selectAllAddress() {
      selectAllAddress().then((data) => {
        this.options = data.data;
      });
    },
    // 重置
    chongzhi() {
      this.formInline = {
        pageNumber: 1,
        pageSize: 10,
        status: "all",
        // orderNumber: "",
        // productCode: "",
        // receiverName: "",
        // receiverPhone: "",
        // trackingNumber: "",
        // orderTime: "",
        // addresseeProvince: "",
        // storeOrderNumber: "",
        // storeOrder: "",
      };
      this.getOrderList();
    },
    // 获取订单列表
    getOrderList() {
      const params = {
        ...this.formInline,
      };
      if (params.status == "all") params.status = '';
      fetchAfterSaleOrderList(params).then((res) => {
        this.list = res.data.list || [];
        this.total = res.data.total;
      });
    },
    handleExport() {
      const params = {
        ...this.formInline,
        status: this.formInline.status == "all" ? null : this.formInline.status,
        ids: !this.checkedOrderIds.length ? null : this.checkedOrderIds,
      };
      delete params.pageNumber;
      delete params.pageSize;
      postExportOrder(params).then((data) => {
        const blob = new Blob([data]);
        const downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = "订单.xlsx"; // 文件名可以根据需要修改
        // 将下载链接元素添加到DOM中并模拟点击下载链接
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 清理下载链接元素和二进制流对象
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(downloadLink.href);
      });
    },
    handleCheckAllChange() {},
    handleCheckedCitiesChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
.root {
  font-size: 12px;
  .btnBoxs {
    display: flex;
    // justify-content: flex-end;
    cursor: pointer;
  }
  .tableBox {
    .tableHeder {
      margin-top: 20px;
      background: #ebeff5;
      padding: 12px;
      font-size: 14px;
    }
    .tableCell {
      margin-top: 20px;
      .cellHeader {
        background: #f5f7f9;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        .cellLeft {
          display: flex;
          align-items: center;
        }
        .dataBox {
          font-size: 14px;
          color: #666666;
          margin-left: 10px;
        }
        .newDataBox {
          margin-left: 50px;
        }
      }
      .tableContent {
        padding: 15px;
        font-size: 14px !important;
        .shopsData {
          display: flex;
          .newImg {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
          .shopsDataBox {
            margin-left: 10px;
            .nameBox {
              font-size: 14px;
            }
            .Model {
              color: #999999;
              margin-top: 12px;
              font-size: 12px;
            }
          }
        }
        .price {
          color: #666666;
        }
        .ActualPayment {
        }
        .Controls {
          display: flex;
          justify-content: space-between;
          /deep/ .el-button {
            display: block;
            margin-left: 0;
          }
          .qiziImg {
            width: 24px;
            height: 24px;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    .btnBoxs {
      display: flex;
      // justify-content: flex-end;
      cursor: pointer;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
